<template>
  <div>
    <el-row v-bind="getRowProps">
      <template v-for="(schema, index) in getSchemaProps" :key="schema.field + '-' + index">
        <DescrItem
          :schema="schema"
          :descrProps="getBindValue"
          :descrData="getDataProps"
        ></DescrItem>
      </template>
    </el-row>
  </div>
</template>
<script lang="tsx" setup>
import type { Recordable } from '@/types/global'
import { basicDescrProps } from './props'
import type { DescrActionType, DescrProps } from './types/descr'
import { computed, onMounted, ref, unref, useAttrs } from 'vue'

const attrs = useAttrs()
const props = defineProps(basicDescrProps as any)

const emit = defineEmits(['register'])

const propsRef = ref<Partial<DescrProps>>({})

const getBindValue = computed(() => ({ ...attrs, ...unref(propsRef) }) as Recordable)

const getRowProps = computed(
  () => ({ ...props.rowProps, ...unref(propsRef).rowProps }) as Recordable,
)

const getSchemaProps = computed(() => unref(propsRef).schema || [])

const getDataProps = computed(() => unref(propsRef).data || {})

async function setProps(descrProps: Partial<DescrProps>) {
  propsRef.value = { ...unref(propsRef), ...descrProps }
}

const formActionType: Partial<DescrActionType> = {
  setProps,
}

onMounted(() => {
  emit('register', formActionType)
})
</script>
